<template>
  <div>
    <div class="gutter-example">
      <a-row :gutter="16">
        <a-col class="gutter-row" :span="6">
          <a-tabs type="card" v-model:activeKey="activeKey">
            <a-tab-pane key="1" tab="使用单位组织机构">
              <Atreecomponent></Atreecomponent>
            </a-tab-pane>
            <a-tab-pane key="2" tab="内部机构管理">
              <Atreecomponent></Atreecomponent>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col class="gutter-row" :span="18">
          <a-tabs
            type="card"
            v-model:activeKey="activeKey2"
            @change="tabsChange"
          >
            <a-tab-pane key="1" tab="机构信息">
              <div class="bottomRight">
                <a-button style="margin-right: 20px">编辑</a-button>
                <a-button type="primary">保存</a-button>
              </div>
              <a-form
                ref="formRef"
                :model="formState"
                :rules="rules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
              >
                <a-form-item ref="jigouname" label="机构名称" name="jigouname">
                  <a-input v-model:value="formState.jigouname" />
                </a-form-item>
                <a-form-item
                  ref="jigoubianma"
                  label="机构编码"
                  name="jigoubianma"
                >
                  <a-input v-model:value="formState.jigoubianma" />
                </a-form-item>
                <a-form-item
                  ref="jigoujiancheng"
                  label="机构简称"
                  name="jigoujiancheng"
                >
                  <a-input v-model:value="formState.jigoujiancheng" />
                </a-form-item>
                <a-form-item
                  ref="jigourenshu"
                  label="机构人数"
                  name="jigourenshu"
                >
                  <a-input v-model:value="formState.jigourenshu" />
                </a-form-item>
                <a-form-item label="上级机构" name="shangjijigou">
                  <a-select
                    v-model:value="formState.shangjijigou"
                    placeholder="请选择上级机构"
                  >
                    <a-select-option value="shanghai">上海</a-select-option>
                    <a-select-option value="beijing">北京</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item
                  ref="jigoudizhi"
                  label="机构地址"
                  name="jigoudizhi"
                >
                  <a-input v-model:value="formState.jigoudizhi" />
                </a-form-item>
                <a-form-item
                  ref="lianxidianhua"
                  label="联系电话"
                  name="lianxidianhua"
                >
                  <a-input v-model:value="formState.lianxidianhua" />
                </a-form-item>
                <a-form-item label="上传图片">
                  <a-upload
                    name="file"
                    list-type="picture-card"
                    v-model:file-list="formState.fileList"
                    :multiple="true"
                    :customRequest="customRequest"
                    @change="handleChange"
                  >
                    <img v-if="imageUrl" :src="imageUrl" alt="upload" />
                    <div v-else>
                      <plus-outlined />
                      <div class="ant-upload-text">上传</div>
                    </div>
                  </a-upload>
                </a-form-item>
              </a-form>
            </a-tab-pane>
            <a-tab-pane key="2" tab="用户关联">
              <a-form
                ref="formRefLine"
                :model="formInline"
                style="display: flex; justify-content: space-between"
              >
                <a-form-item label="用户账号:">
                  <a-input
                    v-model="formInline.zhuanghao"
                    placeholder="请输入"
                    clearable
                  />
                </a-form-item>
                <a-form-item label="用户姓名：">
                  <a-input
                    v-model="formInline.name"
                    placeholder="请输入"
                    clearable
                  />
                </a-form-item>

                <a-form-item style="margin-right: 0px">
                  <div
                    style="width: 100%; display: flex; justify-content: right"
                  >
                    <a-button
                      type="primary"
                      @click="search"
                      style="margin-right: 20px"
                    >
                      <template #icon><SearchOutlined /></template>
                      搜索
                    </a-button>
                    <a-button @click="reset">重置</a-button>
                  </div>
                </a-form-item>
              </a-form>
              <div class="btnGroup">
                <EasyTable
                  :tablecolumns="tablecolumns"
                  :tabledata="tabledata"
                  :ALLtotal="ALLtotal"
                  :BtnNameList="BtnNameList"
                ></EasyTable>
              </div>
            </a-tab-pane>
            <a-tab-pane key="3" tab="策略关联">
              <a-form
                ref="formRefLine"
                :model="formInline"
                style="display: flex; justify-content: space-between"
              >
                <a-form-item label="用户编号:">
                  <a-input
                    v-model="formInline.zhuanghao"
                    placeholder="请输入"
                    clearable
                  />
                </a-form-item>
                <a-form-item label="角色名称:">
                  <a-input
                    v-model="formInline.name"
                    placeholder="请输入"
                    clearable
                  />
                </a-form-item>

                <a-form-item style="margin-right: 0px">
                  <div
                    style="width: 100%; display: flex; justify-content: right"
                  >
                    <a-button
                      type="primary"
                      @click="search"
                      style="margin-right: 20px"
                    >
                      <template #icon><SearchOutlined /></template>
                      搜索
                    </a-button>
                    <a-button @click="reset">重置</a-button>
                  </div>
                </a-form-item>
              </a-form>
              <EasyTable
                :tablecolumns="tablecolumns"
                :tabledata="tabledata"
                :ALLtotal="ALLtotal"
                :BtnNameList="BtnNameList"
              ></EasyTable>
            </a-tab-pane>
          </a-tabs>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
  import EasyTable from './components/EasyTable.vue'
  import Atreecomponent from '../../../components/Atreecomponent.vue'
  import { message } from 'ant-design-vue'
  import { PlusOutlined, SearchOutlined } from '@ant-design/icons-vue'
  import { defineComponent, ref } from 'vue'
  const activeKey = ref('1')
  const activeKey2 = ref('1')
  const formState = ref({})
  const formInline = ref({})
  const labelCol = { span: 4 }
  const wrapperCol = { span: 14 }
  const rules = {
    jigouname: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
    jigoubianma: [
      { required: true, message: '请输入机构编码', trigger: 'blur' },
    ],
    shangjijigou: [
      { required: true, message: '请选择上级机构', trigger: 'change' },
    ],
    jigoudizhi: [
      { required: true, message: '请输入机构地址', trigger: 'blur' },
    ],
  }
  //表格的表头数据
  const tablecolumns = ref([
    {
      title: '用户账号',
      dataIndex: 'yonghuzhanghao',
      key: 'yonghuzhanghao',
    },
    {
      title: '用户人员',
      dataIndex: 'yonghurenyuan',
      key: 'yonghurenyuan',
    },
    {
      title: '账号状态',
      dataIndex: 'zhanghaozhuangtai',
      key: 'zhanghaozhuangtai',
    },
    {
      title: '账号类别',
      dataIndex: 'zhanghaoleibie',
      key: 'zhanghaoleibie',
    },
    {
      title: '维护人',
      dataIndex: 'weihuren',
      key: 'weihuren',
    },
    {
      title: '维护时间',
      dataIndex: 'weihushijian',
      key: 'weihushijian',
    },
    {
      title: '操作',
      key: 'operation',
      // 这里不需要定义dataIndex
    },
  ])
  //表格的数据
  const tabledata = ref([
    {
      key: '1',
      yonghuzhanghao: 'zhangsan',
      yonghurenyuan: '张三',
      zhanghaozhuangtai: '启用',
      zhanghaoleibie: '永久',
      weihuren: '管理员',
      weihushijian: '2021-09-14 10:01:23',
    },
  ])
  //表格的总条数
  const ALLtotal = ref('100')
  //是用户关联 还是 策略关联
  const BtnNameList = ref('yonghu')
  const customRequest = ({ file, onSuccess, onError }) => {
    const formData = new FormData()
    formData.append('file', file)

    // 这里使用fetch模拟上传，实际项目中替换为你的上传逻辑
    fetch('your-upload-api', {
      method: 'POST',
      body: formData,
    })
      .then((response) => response.json())
      .then((data) => {
        onSuccess(data)
        message.success('上传成功')
      })
      .catch((error) => {
        onError(error)
        message.error('上传失败')
      })
  }

  const handleChange = ({ file, fileList, event }) => {
    // 可以在这里处理文件状态变化，例如限制上传数量等
  }
  //表头切换
  const tabsChange = () => {
    console.log(activeKey2.value)
    if (activeKey2.value == '3') {
      BtnNameList.value = 'celue'
    } else if (activeKey2.value == '2') {
      BtnNameList.value = 'yonghu'
    }
  }
</script>
<style scoped lang="less">
  .gutter-example :deep(.ant-row > div) {
    background: transparent;
    border: 0;
  }
  .gutter-box {
    background: #00a0e9;
    padding: 5px 0;
  }
  .bottomRight {
    text-align: right;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
  .btnGroup {
    width: 100%;
  }
</style>
